<!--  -->
<template>
  <div style="overflow:hidden;">
    <el-upload
      ref="upload"
      class="upload_button left"
      :disabled="disabled"
      action=""
      :data="{ 'token': token }"
      :accept="accept"
      :file-list="fileList"
      :show-file-list="false"
      :http-request="uploadImage"
      :limit="maxSize === 0 ? 10000 : maxSize"
    >
      <el-tooltip
        :disabled="tips==='' || tips===null || tips===undefined"
        class="item"
        effect="dark"
        :content="tips"
        placement="top"
      >
        <el-input
          v-model="val"
          :class="{'require':getRequire && isNull()}"
          class="input"
          type="text"
          size="small"
          :disabled="disabled"
          @input="click"
        />
      </el-tooltip>
    </el-upload>
    <i
      v-if="!isNull()"
      class="el-icon-view left"
      style="cursor:pointer;font-size:16px;line-height:32px;margin-left:15px;"
      @click="showImg"
    />
    <el-image
      v-if="!isNull()"
      v-show="false"
      ref="image"
      class="img"
      style="width: 40px; height: 40px"
      :src="imageUrl"
      :preview-src-list="previewList"
      @click="showImg"
    />
  </div>
</template>

<script>
import { createClient, getSrc } from '@/utils/ik/oss/oss.js'
export default {
  name: 'IkFormImage',
  components: {},
  props: {
    code: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    defaultValue: {
      type: String,
      default: ''
    },
    maxSize: {
      type: Number,
      default: 9999
    },
    disabled: {
      type: Boolean,
      default: false
    },
    fileType: {
      type: Array,
      default: () => []
    },
    tips: {
      type: String,
      default: ''
    },
    require: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      val: '',
      dialogVisible: false,
      listObj: [],
      fileList: [],
      uploadParams: {
        uploadPath: '',
        uploadSize: ''
      },
      client: null,
      imageUrl: '',
      filePath: '',
      previewList: [],
      url: this.$store.getters['setting/getUrl'],
      token: this.$store.getters['user/getToken']
    }
  },
  computed: {
    accept() {
      let res = ''
      for (const i of this.fileType) {
        res = res + i + ','
      }
      return res.slice(0, res.length - 1)
    },
    getRequire() {
      return this.require
    }
  },
  watch: {
    fileList(val, oldVal) {

    },
    value: {
      handler(value, oldValue) {
        if (value !== null && value !== '') {
          this.val = value
        } else {
          this.val = this.defaultValue
        }
        this.gets()
      },
      immediate: true
    },
    val: {
      handler(value, oldValue) {
        this.click(value)
      },
      immediate: true
    }
  },
  created() {
    this.gets()
  },
  methods: {
    gets() {
      if (this.val) {
        const client = this.client || this.createClient()
        this.uploadParams.uploadPath = getSrc(client, this.val) // 可访问的链接
        this.imageUrl = this.uploadParams.uploadPath
        this.previewList = [this.imageUrl]
      }
    },
    createClient() {
      this.client = createClient()
      return this.client
    },
    uploadImage(item) {
      let type
      const client = this.client || this.createClient()
      switch (item.file.type) {
        case 'image/jpeg':
          type = 'jpeg'
          break
        case 'image/jpg':
          type = 'jpg'
          break
        case 'image/gif':
          type = 'gif'
          break
        case 'image/png':
          type = 'png'
          break
      }
      const key = 'test/time=' + new Date().getTime() + '&id=' + this.guidGenerator() + '.' + type// 存储路径，并且给图片改成唯一名字
      return client.put(key, item.file, { "x-oss-forbid-overwrite": true, "Sec-Fetch-Dest": "image", "Sec-Fetch-Mode": "no-cors", "Sec-Fetch-Site": "cross-site" }).then(res => { // OSS上传
        this.val = key
        this.gets()
        // this.uploadParams.uploadPath = client.signatureUrl(key, { expires: 999999999999999 }) // 可访问的链接
        // this.imageUrl = this.uploadParams.uploadPath
        // this.previewList = [this.imageUrl]
      })
    },
    guidGenerator() {
      var S4 = function() {
        return ((1 + Math.random()) * 0X10000 | 0).toString(16).substring(1)
      }
      return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4())
    },
    click(value) {
      this.$emit('input', value)
    },
    showImg() {
      this.$refs.image.showViewer = true
    },
    isNull() {
      return this.val === '' || this.val === null || this.val === undefined
    },
    reset() {
      this.value = this.defaultValue
    },
    clean() {
      this.value = ''
    }
  }
}
</script>
<style lang='scss' scoped>
::v-deep.require> .el-input__inner{
    border: red 1px solid;
}
.ik-image{
  ::v-deep.el-form-item__content{
    width: calc(100% - 180px);
    overflow: visible;
    .input{
      display: inline-block;
    }
    .upload_button{
      width: 100%;
      margin: 0;
      padding: 0;
      display: inline-block;
      .el-upload{
        max-width: 100%;
        width: 100%;
      }
    }
  }
}
.item{width:calc(100% - 30px)}
</style>
